.timeline-box {
    margin: 0 auto;
    width: var(--archive-box-width, 80%)
}

.timeline-box,
.timeline-single {
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content
}

.timeline-single {
    display: flex
}

.timeline-line {
    text-align: center;
    flex: .3
}

.timeline-content {
    flex: 6;
    margin-left: 1.5rem;
    border-radius: 7px;
    padding-left: 15px
}

.timeline-line-icon-par {
    height: .9rem;
    width: 100%
}

.timeline-line-icon {
    height: 7px;
    width: 7px;
    border-radius: 100px;
    text-align: center
}

.timeline-line-bottom,
.timeline-line-icon {
    background: var(--archive-timeline, rgba(144, 241, 239, .35));
    margin: 0 auto
}

.timeline-line-bottom {
    height: 90%;
    width: 4px;
    margin-top: 3px
}

.timeline-create-link-single {
    margin-left: 1.15rem
}

.timeline-create-link-single li:hover .timeline-line-icon {
    -webkit-animation: timeline-active .3s;
    animation: timeline-active .3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: var(--archive-timeline-active, pink)
}

@-webkit-keyframes timeline-active {
    0% {
        width: 7px;
        height: 7px
    }

    25% {
        width: 8px;
        height: 8px
    }

    50% {
        width: 9px;
        height: 9px
    }

    75% {
        width: 10px;
        height: 10px
    }

    to {
        width: 11px;
        height: 11px
    }
}

.timeline-create-links {
    flex: 4
}

.timeline-create-month {
    flex: 6
}

.timeline-create-time {
    height: 1.5rem;
    width: 10rem
}

.timeline-create-time span {
    line-height: 1.5rem
}

.timeline-create-link-single ul {
    padding: 0
}

.timeline-create-link-single ul li {
    list-style: none;
    margin-bottom: 1.7rem;
    display: flex
}

.timeline-create-link-single ul li .timeline-title span {
    -webkit-animation-duration: .33s;
    animation-duration: .33s;
    -webkit-animation-name: archiveEnter;
    animation-name: archiveEnter
}

.timeline-create-link-single ul li:hover .timeline-content {
    cursor: pointer;
    -webkit-animation: archiveShade .6s;
    animation: archiveShade .6s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.timeline-create-link-single ul li:hover .timeline-title span {
    -webkit-animation: archiveHover .33s;
    animation: archiveHover .33s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    color: var(--archive-timeline-active-title, pink)
}

@-webkit-keyframes archiveShade {
    0% {
        box-shadow: transparent
    }

    to {
        box-shadow: -4px 9px 25px -6px rgba(0, 0, 0, .1)
    }
}

@-webkit-keyframes archiveEnter {
    0% {
        padding-left: 10px
    }

    to {
        padding-left: 0
    }
}

@-webkit-keyframes archiveHover {
    0% {
        padding-left: 0
    }

    to {
        padding-left: 10px
    }
}

.timeline-title a {
    color: #2c3e50;
    font-weight: 700
}

.timeline-create-page-time span {
    font-size: 13px
}

.timeline-year {
    height: 3rem;
    position: relative;
    width: 6rem;
    padding-left: 1.15rem
}

.timeline-year-title:before {
    display: inline-block;
    height: 7px;
    margin: 0 auto;
    position: absolute;
    bottom: 10%;
    content: "";
    border-radius: 10px;
    -webkit-animation: timelineYearLevel .9s;
    animation: timelineYearLevel .9s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.timeline-year:hover .timeline-year-title {
    cursor: pointer
}

.timeline-year:hover .timeline-year-title:before {
    -webkit-animation: timelineTitleChange .9s;
    animation: timelineTitleChange .9s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes timelineYearLevel {
    0% {
        background: rgba(0, 207, 200, .9);
        width: 50%
    }

    to {
        background: rgba(0, 207, 200, .4);
        width: 15%
    }
}

@keyframes timelineYearLevel {
    0% {
        background: rgba(0, 207, 200, .9);
        width: 50%
    }

    to {
        background: rgba(0, 207, 200, .4);
        width: 15%
    }
}

@-webkit-keyframes timelineTitleChange {
    0% {
        background: rgba(0, 207, 200, .4);
        width: 15%
    }

    to {
        width: 50%;
        background: rgba(0, 207, 200, .9)
    }
}

@keyframes timelineTitleChange {
    0% {
        background: rgba(0, 207, 200, .4);
        width: 15%
    }

    to {
        width: 50%;
        background: rgba(0, 207, 200, .9)
    }
}

.timeline-year span {
    line-height: 2rem;
    font-weight: 700;
    font-size: 32px
}

.timeline-item {
    margin-bottom: 1.5rem
}